<template>
    <div class="order">
        <div v-if="Data.list && Data.list.length">
            <div class="table-header">
                <div class="table-header-con">
                    <div class="table-header-item" v-for="(item, index) in Data.tableHeader" :key="index">
                        {{ item.label }}
                    </div>
                </div>
                <div class="order-item-bg"></div>
            </div>
            <div class="table-container">
                <div v-for="(item, index) in Data.list" :key="index">
                    <div class="order-item-title">
                        <div class="order-item-title-item">
                            订单号：{{ item.orderSn }}
                            <div v-if="[3, 4, 5].includes(item.orderType)" class="sign">拼</div>
                            <div v-if="item.orderType === 6" class="sign-jifen">积分商城</div>
                        </div>
                        <div class="order-item-title-item">下单时间：{{ item.createdAt }}</div>
                        <div class="order-item-title-item">店铺：{{ item.shopName }}</div>
                    </div>
                    <el-table
                        width="100%"
                        :span-method="e => objectSpanMethod(e, index)"
                        :data="item.goods"
                        size="small"
                        border
                        :show-header="false">
                        <el-table-column prop="orderId" label="商品信息">
                            <template #default="scope">
                                <div class="goods-item">
                                    <el-image class="img" :src="scope.row.goodsImg" alt="">
                                        <template #error>
                                            <div class="image-slot">
                                                <img class="errimg" src="@/assets/imgs/logo/default.png" />
                                            </div>
                                        </template>
                                    </el-image>
                                    <div class="goods-item-info">
                                        <div class="goods-item-name">{{ scope.row.goodsName }}</div>
                                        <div
                                            class="goods-item-sku"
                                            v-for="(el, idx) in scope.row.skuExtInfo"
                                            :key="idx">
                                            {{ el.keyAttributeName }}：{{ el.attributeValue }}
                                        </div>
                                        <div class="goods-item-price">
                                            <div v-if="item.orderType === 6">
                                                {{ floatDivide(scope.row.goodPoints, 100) }}积分
                                            </div>
                                            <div v-else>￥{{ floatDivide(scope.row.goodsPrice, 100) }}</div>
                                        </div>
                                    </div>
                                    <div class="goods-item-status" v-if="item.afterStatusName">
                                        <div
                                            class="status-refund"
                                            :class="{
                                                'status-02': item.afterStatus == 7,
                                                'status-03': [8, 9, 10].includes(item.afterStatus)
                                            }">
                                            {{ item.afterStatusName }}
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="buyNum" label="数量" width="100px" />
                        <el-table-column align="center" prop="sellPrice" label="实付金额" width="100px">
                            <template #default="scope">
                                <div class="price-color" v-if="item.orderType === 6">0</div>
                                <div v-else class="price-color">￥{{ floatDivide(scope.row.sellPrice, 100) }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="优惠" width="160px">
                            <template #default>
                                <div>
                                    {{
                                        item.discountAmount + item.couponFee
                                            ? '优惠：￥' + floatDivide(item.discountAmount + item.couponFee, 100)
                                            : '无'
                                    }}
                                </div>
                                <div v-if="item.couponInformate">
                                    优惠券:
                                    {{ item.couponInformate }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="订单状态" width="100px">
                            <template #default>
                                <div>
                                    {{ translateOrderCode(item.orderStatus, item.isSelfPickup) }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="order-item-footer">
                        <div class="freight-item">
                            <span>
                                运费：{{
                                    !(item.logisticsFee + item.freeFreightFee)
                                        ? '免运费'
                                        : '￥' + floatDivide(item.logisticsFee + item.freeFreightFee, 100)
                                }}
                            </span>
                            <!-- <span>
                                退款：{{ item.afterStatus ? '￥' + floatDivide(item.amountTotal, 100) : '无' }}
                            </span> -->
                        </div>
                        <div class="all-amount">
                            实付总计：<span>￥{{ floatDivide(item.amountTotal, 100) }}</span>
                        </div>
                    </div>
                    <div class="order-item-bg"></div>
                </div>
            </div>

            <Pagination
                :total="total"
                :page-size="params.pageSize"
                :current-page="params.pageNum"
                @sizeChange="changeSizeHandler"
                @pageChange="changePageHandler" />
        </div>
        <div v-else class="empty_table">
            <img style="width: 50%" src="@/assets/imgs/logo/default.png" />
            <div class="empty-content">暂无订单数据</div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import Pagination from '@/components/Pagination.vue';
import request from '@/request/index';
import { useRoute } from 'vue-router';
import { format, floatDivide, translateOrderCode } from '@/commons/utils.js';
const route = useRoute();
let params = {
    pageNum: 1,
    pageSize: 10,
    memberId: route.query.id
};
let total = ref(0);
let Data = reactive({
    list: [],
    tableHeader: [
        { label: '商品信息' },
        { label: '数量' },
        { label: '实付金额' },
        { label: '优惠' },
        { label: '订单状态' }
    ]
});
const initTableData = () => {
    params.pageNum = 1;
    queryTableData();
};
const queryTableData = async () => {
    const res = (await request('memberOrderServ', params)) || {};
    const { list, totalCount } = res.data || {};
    Data.list.length = 0;
    Data.list.push(...list);
    total.value = totalCount || 0;
};

const changePageHandler = page => {
    params.pageNum = page;
    queryTableData();
};

const changeSizeHandler = pageSize => {
    params.pageNum = 1;
    params.pageSize = pageSize;
    queryTableData();
};
initTableData();

const objectSpanMethod = ({ rowIndex, columnIndex }, index) => {
    if ([3, 4].includes(columnIndex)) {
        let row = 0;
        Data.list.map(el => {
            if (el?.goods?.length > row) {
                row = el.goods.length;
            }
        });
        if (rowIndex % row === 0) {
            return {
                rowspan: row,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
};
</script>

<style lang="scss" scoped>
.order {
    ::-webkit-scrollbar {
        width: 6px;
        // height: 10px;
        background-color: #f5f5f5;
    }
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #f5f5f5;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #555;
    }
    .table-container {
        max-height: 350px;
        overflow: auto;
    }
    .sign {
        width: 16px;
        height: 16px;
        background: #ff6b00;
        border-radius: 2px;
        text-align: center;
        line-height: 16px;
        font-weight: 600;
        font-size: 12px;
        color: #ffffff;
        display: inline-block;
    }
    .sign-jifen {
        margin-left: 5px;
        color: #ff6b00;
        height: 22px;
        width: 62px;
        font-size: 12px;
        background: #fffaf9;
        border-radius: 2px;
        border: 1px solid #facaa8;
        display: inline-block;
        line-height: 22px;
        text-align: center;
    }
    .container {
        max-height: 62vh;
        overflow-y: auto;
    }
    .price-color {
        color: #fa6a0a;
    }
    .table-header {
        border: 1px solid #eaeaea;
        border-bottom: none;
        font-size: 14px;
        font-weight: 600;
        color: #33302d;
        line-height: 14px;
        margin-bottom: 15px;
        .table-header-con {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 48px;
            background: #f9f9f9;
        }
        .table-header-item {
            font-weight: 600;
            text-align: center;
            flex: 1;
        }
        .table-header-item:nth-child(1) {
            padding-left: 12px;
            // min-width: 400px;
            // max-width: 400px;
            text-align: left;
            box-sizing: content-box;
        }
        .table-header-item:nth-child(2) {
            min-width: 100px;
            max-width: 100px;
            text-align: center;
        }
        .table-header-item:nth-child(3) {
            min-width: 100px;
            max-width: 100px;
            text-align: center;
        }
        .table-header-item:nth-child(4) {
            min-width: 160px;
            max-width: 160px;
            text-align: center;
        }
        .table-header-item:nth-last-child(1) {
            text-align: center;
            min-width: 100px;
            max-width: 100px;
        }
    }
    .order-item-title {
        display: flex;
        align-items: center;
        background: #f9f9f9;
        border: 1px solid #eaeaea;
        border-bottom: none;
        padding: 0 12px;
        height: 56px;
        font-size: 14px;
        // font-weight: 600;
        color: #33302d;
        line-height: 14px;
        .order-item-title-item {
            margin-right: 3rem;
        }
    }
    .goods-item {
        padding-left: 4px;
        display: flex;
        font-size: 14px;
        line-height: 14px;
        .img {
            margin-right: 8px;
            width: 100px;
            height: 100px;
        }
        .errimg {
            margin-right: 8px;
            width: 100px;
            top: 50%;
            position: absolute;
            translate: 0 -50%;
        }
        .goods-item-info {
            flex: 1;
            .goods-item-name {
                padding-bottom: 9px;
                color: #33302d;
            }
            .goods-item-sku {
                padding-bottom: 4px;
                color: #969696;
            }
            .goods-item-price {
                padding-top: 7px;
                color: #fa6a0a;
                display: flex;
                justify-content: space-between;
            }
        }
        .goods-item-status {
            display: flex;
            flex-direction: column-reverse;
            text-align: center;
            .refund-num {
                padding-top: 4px;
            }
            .status-refund {
                padding: 5px 16px;
                border-radius: 2px;
                border: 1px solid #eaeaea;
            }
            .status-02 {
                color: #4dc149;
            }
            .status-03 {
                color: #ff0000;
            }
        }
    }
    .order-item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 56px;
        background: #f9f9f9;
        border: 1px solid #eaeaea;
        border-top: none;
        margin-bottom: 15px;
        .freight-item {
            flex: 1;
            text-align: right;
            span {
                margin-right: 40px;
            }
        }
        .all-amount {
            margin-right: 60px;
            span {
                color: #fa6a0a;
            }
        }
    }
    .none_more {
        font-size: 12px;
        color: #b5a8a8;
        text-align: center;
        width: 100%;
        line-height: 40px;
    }
    .empty_table {
        padding: 50px 25px;
        min-height: 300px;
        text-align: center;
        margin: auto;
        .empty-content {
            height: 20px;
            font-size: 13px;
            color: #969696;
            line-height: 20px;
        }
    }
}
</style>
